<template>
  <div>
    <div class="detailtabel">
      <div class="table_main">
        <el-row>
          <el-col :sm="12"  :lg="8">
            <div class="label">订单编号</div>
            <div class="content">{{tableData.orderNum}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">游戏类型</div>
            <div class="content">{{tableData.gameType == 1? '王者': '吃鸡'}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">游戏区服</div>
            <div class="content">{{tableData.area == 1? '微信': 'qq'}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">订单类型</div>
            <div class="content">{{tableData.type}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">订单标题</div>
            <div class="content">{{tableData.title}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">订单金额</div>
            <div class="content">{{tableData.money}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">需求时间</div>
            <div class="content">{{tableData.number}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">安全保证金</div>
            <div class="content">{{tableData.safeMargin}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">效率保证金</div>
            <div class="content">{{tableData.efficiencyMargin}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">用户id</div>
            <div class="content">{{tableData.userId}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">代练id</div>
            <div class="content">{{tableData.wid}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">预计完成时间</div>
            <div class="content">{{tableData.expectTime}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">实际完成时间</div>
            <div class="content">{{tableData.actvalTime}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">创建时间</div>
            <div class="content">{{tableData.createTime}}</div>
          </el-col>
          <el-col :sm="12" :lg="16">
            <div class="label">备注</div>
            <div class="content">{{tableData.etc}}</div>
          </el-col>
          <el-col :sm="24" :lg="24">
            <div class="label">截图</div>
            <div class="content">
              <img
                style="height: 200px"
                v-for="url in srcList"
                :key="url"
                :src="url"
                @click="preview(url)">
            </div>
          </el-col>
          <el-col :sm="12" :lg="8" v-if="tableData.isLock">
            <div class="label">订单锁定</div>
            <div class="content">
              <el-tag
                :type="tableData.isLock? 'success' :'info'"
                disable-transitions>{{tableData.isLock? '锁定':'' }}</el-tag>
            </div>
          </el-col>
        </el-row>

      </div>
      <h3 class="title">号主信息:</h3>
      <div class="table_main">
      <el-row>
        <el-col :sm="12" :lg="8">
          <div class="label">账号</div>
          <div class="content">{{tableData.userName}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">密码</div>
          <div class="content">{{tableData.passWord}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">昵称</div>
          <div class="content">{{tableData.nickName}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">手机</div>
          <div class="content">{{tableData.phone}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">说明</div>
          <div class="content">{{tableData.instruction}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">发单渠道</div>
          <div class="content">{{tableData.channel===1?'标准区':'指定打手'}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">指定打手</div>
          <div class="content">{{tableData.specified}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">支付状态</div>
          <div class="content">{{tableData.state | state}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">订单状态</div>
          <div class="content">{{tableData.status | status}}</div>
        </el-col>
        <el-col :sm="12" :lg="8">
          <div class="label">赔付金额</div>
          <div class="content">{{tableData.compensate}}</div>
        </el-col>
      </el-row>
      </div>

      <h3 class="title">退款信息:</h3>
      <div class="table_main">
        <el-row>
          <el-col :sm="12" :lg="16">
            <div class="label">理由</div>
            <div class="content">{{tableData.reason}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">退款金额</div>
            <div class="content">{{tableData.refundMoney}}</div>
          </el-col>
          <el-col :sm="12" :lg="8">
            <div class="label">退款类型</div>
            <div class="content">{{tableData.refundType}}</div>
          </el-col>
        </el-row>
      </div>

      <div class="footer">
        <template v-if="status===4">
          <el-button type="primary" size="big" icon="el-icon-close" @click="queueRefuse()" >拒绝撤销订单</el-button>
          <el-button type="primary" size="big" icon="el-icon-check" @click="queueClick()" >同意撤销订单</el-button>
        </template>
      </div>
    </div>
    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogFormVisible"  width="50%" style="text-align: center;">
      <img :src="lookimg" alt="" style="max-width:100%;max-height: 100%;">
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        lookimg: '',
        dialogFormVisible: false,
        reason: '',
        type: 1,
        tableData:{},
      }
    },
    filters: {
      state(value){
        let list = ['未支付','已支付','待退款','已退款']
        return list[value*1]
      },
      status(value){ // 0待接单 1已接单（待完成） 2已完成（待验收） 3已评价 4撤销中 5已撤销 6异常 7不同意撤销 8已验收 9拒绝完成 10客服介入（仲裁中） 12已下架
        let list = ['待接单','已接单','已完成','已评价','撤销中','已撤销','异常','不同意撤销','已验收','拒绝完成','客服介入','已下架']
        return list[value*1]
      },
    },
    computed: {
      srcList(){
        if(this.tableData.img){
          return this.tableData.img.split(';')
        }
        return []
      }
    },
    methods: {
      preview(url){
        this.lookimg = url
        this.dialogFormVisible = true
      },
      // 同意撤销
      queueClick(){
        this.$confirm('是否解除封禁?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl2(`/whereas/isUndo?id=${this.tableData.id}&result=1`),
            method: 'get',
            data: this.$http.adornData({
            })
          }).then(({status,data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }
          })
        });
      },
      // 封禁
      queueRefuse(){
        this.$prompt('请输入封禁理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputType: 'textarea'
        }).then(({ value }) => {
          this.$http({
            url: this.$http.adornUrl2(`/whereas/isUndo?id=${this.tableData.id}&result=2&reason=${value}`),
            method: 'get',
            data: this.$http.adornData({
            })
          }).then(({status,data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }

          })
        });
      },
      // 获取数据列表
      dataSelect () {
        let id = this.$route.query.id
        let type = this.$route.query.type*1 || 1
        this.type = type
        this.$http({
          url: this.$http.adornUrl2(`/whereas/findOrder?id=${id}`),
          method: 'get',
          params: this.$http.adornParams({
          })
        }).then(({data}) => {
          if (data.status === 0) {
            let returnData = data.data;
            this.tableData = returnData;
          }
        })
      },
    },
    activated () {
      this.dataSelect()
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .table_main{
    .el-col{
      display: flex;
      .label{
        width: 140px;
        background-color: #fafafa;
        padding: 16px 24px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
      .content{
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 24px;
        border-right: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }
    }

  }
  .footer{
    margin-top: 10px;
    margin-left: 150px;
    .el-button{
      margin-right: 20px;
    }
  }
  .detailtabel .table_main{
    border: 1px solid #e8e8e8;
  }

</style>
